<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'

import { useGetEnterprisePage, useGetEnterpriseSourceType, useGetEnterpriseType } from '@fl/api/man-api'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'

import SupplierDatabase from './supplier-database/index.vue'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: '/operations-pages/operations-enterprise-management/operations-enterprise-info-list',
})

const { push } = useRouter()

type IState = {
    auditStatus: string
    name: string
    secondType: string
    source: string
    type: number
}

const initialState: IState = {
    auditStatus: '',
    name: '',
    secondType: '',
    source: '',
    type: -1,
}
const state = ref(cloneDeep(initialState))
const activeTabName = computed(() => String(state.value.type))

const initialPage = {
    currentPage: 1,
    pageSize: 10,
    total: 0,
}
const tablePage = ref(cloneDeep(initialPage))

// 这里请求下拉数据
const enterpriseTypeParams = computed(() => state.value.type)
const { data: enterpriseTypeList } = useGetEnterpriseType(enterpriseTypeParams)
const { data: enterpriseSourceList } = useGetEnterpriseSourceType()
const enterpriseTypeOptions = computed(() => (enterpriseTypeList.value ?? []).map(x => ({ label: x.label, value: x.value })))

const apiTypeParamsDict: any = {
    '-1': undefined,
    '1': 0,
    '2': 1,
}

const params = computed(() => ({
    page: tablePage.value.currentPage,
    size: tablePage.value.pageSize,
    ...state.value,
    type: apiTypeParamsDict[state.value.type],
    catType: 1,

}))

const { data: tableData, isLoading } = useGetEnterprisePage(params)

const records = ref()
watchEffect(() => {
    if (tableData.value) {
        records.value = cloneDeep(tableData.value.records)
        tablePage.value.total = tableData.value.total ?? 0
    }
})

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 8,
        },
        label: '企业类型',
        options: enterpriseTypeOptions,
        prop: 'secondType',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '企业名称',
        prop: 'name',
    },
    {
        colProps: {
            span: 8,
        },
        label: '企业来源',
        options: enterpriseSourceList,
        prop: 'source',
        valueType: 'select',
    },
    {
        colProps: {
            span: 8,
        },
        label: '生效状态',
        options: [
            {
                label: '待审核',
                value: 0,
            },
            {
                label: '审核通过',
                value: 1,
            },
            {
                label: '审核驳回',
                value: 2,
            },
        ],
        prop: 'auditStatus',
        valueType: 'select',
    },
]

const gridOptions = reactive<VxeGridProps>({
    align: 'center',
    columnConfig: {
        resizable: true,
    },
    columns: [
        { field: 'enterpriseName', slots: { default: 'enterpriseName' }, title: '企业名称' },
        { field: 'typeName', title: '企业类型' },
        { field: 'sourceName', title: '企业来源' },
        { field: 'auditStatusCustomName', title: '生效状态' },
        { field: 'contactName', title: '联系人' },
        { field: 'updateTime', title: '更新日期' },
        { slots: { default: 'operate' }, title: '操作' },
    ],
    data: [],
    editConfig: {
        mode: 'row',
        showStatus: true,
        trigger: 'manual',
    },
    height: 500,
    keepSource: true,
    showOverflow: true,
    toolbarConfig: {
        slots: {
            buttons: 'toolbar_buttons',
        },
    },
})

function look(row: any) {
    let source: string = ''
    if (row.secondType === 8)
        source = 'manufacturer'

    push(
        {
            path: '/operations-pages/operations-enterprise-management/operations-enterprise-info-show',
            query: {
                id: row.id,
                source,
            },
        },
    )
}

function edit(row: any) {
    push(
        {
            path: '/operations-pages/operations-enterprise-management/operations-enterprise-info-edit',
            query: {
                id: row.id,
                source: 'manufacturer',
            },
        },
    )
}

function goCheck(row: any) {
    let source: string = ''
    let type: any = null
    if (row.secondType === 8) {
        source = 'manufacturer'
        type = 1
    }
    else {
        type = 2
    }

    push(
        {
            path: '/operations-pages/operations-enterprise-management/operations-enterprise-info-check',
            query: {
                id: row.id,
                name: row.enterpriseName,
                source,
                type,
            },
        },
    )
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}
function search(values: FieldValues) {
    tablePage.value = cloneDeep(initialPage)
    state.value = { ...state.value, ...values }
}

function tabChange(tab: '-1' | '1' | '2') {
    state.value.type = Number(tab)
    reset()
}

function reset() {
    state.value.name = ''
    state.value.secondType = ''
    state.value.source = ''
    state.value.auditStatus = ''
    tablePage.value = cloneDeep(initialPage)
}
</script>

<template>
    <ElCard shadow="never">
        <div class="mb-20 text-16 font-700">
            企业信息
        </div>

        <el-tabs :model-value="activeTabName"
                 class="demo-tabs"
                 @tab-change="tabChange"
        >
            <el-tab-pane label="全部"
                         name="-1"
            />

            <el-tab-pane label="采购商"
                         name="1"
            />

            <el-tab-pane label="供应商"
                         name="2"
            />
        </el-tabs>

        <component :is="SupplierDatabase"
                   v-if="activeTabName === '2'"
        />

        <SearchTable v-else
                     v-bind="gridOptions"
                     v-model:pager="tablePage"
                     row-class-name="table-row-style"
                     :loading="isLoading"
                     :data="records"
                     @page-change="handlePageChange"
        >
            <template #toolbar_buttons>
                <div :key="state.type"
                     class="w-full"
                >
                    <SearchForm v-bind="state"
                                :columns="columns"
                                submit-text="查询"
                                @submit="search"
                                @reset="reset"
                    />
                </div>
            </template>

            <template #enterpriseName="{ row }">
                <span class="buttontext-#409EFF truncate cursor-pointer"
                      @click="look(row)"
                >{{ row.enterpriseName }}</span>
            </template>

            <template #operate="{ row }">
                <ElSpace>
                    <span class="text-#409EFF cursor-pointer"
                          @click="look(row)"
                    >
                        查看
                    </span>

                    <span v-if="row.type === 1 && row.auditStatus !== 0"
                          class="text-#409EFF cursor-pointer"
                          @click="edit(row)"
                    >
                        编辑
                    </span>

                    <span v-if="row.secondType === 8"
                          class="text-#409EFF cursor-pointer"
                          @click="goCheck(row)"
                    >
                        查看经销商
                    </span>

                    <span v-if="row.secondType === 10"
                          class="text-#409EFF cursor-pointer"
                          @click="goCheck(row)"
                    >
                        查看厂家
                    </span>
                </ElSpace>
            </template>
        </SearchTable>
    </ElCard>
</template>
